<template>
  <div>
    <ElDivider>节点设置</ElDivider>
    <ElForm :model="node" label-width="80px">
      <ElFormItem prop="nodeName" label="节点名称">
        <ElInput v-model="node.nodeName"></ElInput>
      </ElFormItem>
      <ElFormItem prop="pageId" label="在线页面">
        <Select
          v-model="node.pageId"
          :options="pageList"
          label-name="pageName"
          value-name="id"
          @change="handlePageChange"
        ></Select>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts" name="NodePanel">
import { ElForm, ElFormItem, ElInput, ElDivider } from "element-plus";
import { Select } from "@/components/Form";
import { computed, inject, onMounted, ref } from "vue";
import { flatWidget } from "../../util/common";
const prop = defineProps({
  node: {
    type: Object
  }
});
const designer = inject("designer");
const pageList = computed(() => designer.value.global.pageList || []);
const formPermList = ref([]);
const handlePageChange = pageId => {
  if (!!pageId) {
    for (const page of pageList.value) {
      if (page.id === pageId) {
        const widgetList = flatWidget(page.pageJson.widgetList);
        const formWidgetList = widgetList.filter(widget => !!widget.formItemProps);
        const permList = formWidgetList.map(formWidget => {
          let readonly = false;
          let hidden = false;
          for (const perm of prop.node.formPermList) {
            if (perm.id === formWidget.id) {
              readonly = !!perm.readonly;
              hidden = !!perm.hidden;
            }
          }
          return {
            id: formWidget.id,
            column: formWidget.formItemProps.prop,
            label: formWidget.formItemProps.label,
            readonly: readonly,
            hidden: hidden
          };
        });
        formPermList.value = permList;
        prop.node.formPermList = formPermList.value;
        return;
      }
    }
  }
  formPermList.value = [];
  prop.node.formPermList = formPermList.value;
};
onMounted(() => {
  handlePageChange(prop.node.pageId);
});
</script>

<style lang="scss" scoped></style>
